label {
  position: relative;
  display: block;
  overflow: hidden;
}

label::before {
  content: attr(data-before);
}

label::after {
  content: attr(data-after);
}

label::before,
label::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  font-size: 12px;
  /* font-family: inherit; */
  box-sizing: border-box;
  color: #999;
}

@keyframes placeholder-before {
  0% {
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes placeholder-after {
  0% {
    transform: translateY(0%);
    opacity: 0;
  }
  100% {
    transform: translateY(-100%);
    opacity: 1;
  }
}

.animate::before {
  animation: 0.25s placeholder-before ease-in-out;
}

.animate::after {
  animation: 0.25s placeholder-after ease-in-out;
}

.animate::before,
.animate::after {
  animation-fill-mode: forwards;
}
